<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{ width:300px;height: 400px;border: solid 1px black;margin: 0 auto; }
    .box .cont{height: 300px;border-bottom: solid 1px black;overflow: auto;}
    .cont p{clear: both;border-radius: 6px;color:#fff;padding: 6px;max-width: 260px;}
    .cont p:nth-child(2n){background: #399;float: left;}
    .cont p:nth-child(2n-1){background: #993;float: right;}
  </style>
</head>
<body>
  <div class="box">
    <div class="cont">
    </div>
    <div class="form">
      <textarea class="txt"></textarea>
      <input type="button" value="发送" class="send">
    </div>
  </div>
</body>
<script>

  var cont = document.querySelector(".cont");
  var txt = document.querySelector(".txt");
  var send = document.querySelector(".send");

  send.onclick = function(){
    // 将输入框中的信息，设置到内容区域
    cont.innerHTML += "<p>" + txt.value + "</p>";

    // 清空输入框
    txt.value = "";

    // 设置内容容器的滚走的距离为自身总高度，保证最新消息持续显示在可视范围内
    cont.scrollTop = cont.scrollHeight;
  }

  


</script>
</html>